<template>
  <div ref="list" :class="['wrap', { 'wrap-horizontal' : scrollX}]">
      <div class="content">
          <slot></slot>
      </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
export default {
    name: 'ListScroller',
    props: {
        // 水平滚动
        scrollX: {
            type: Boolean,
            default: false
        },
        // 垂直滚动
        scrollY: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            inst: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.init()
        })        
    },
    updated() {
        this.refresh()
    },
    beforeDestroy() {
        this.destroy()
    },
    methods: {
        init() {
            if(!this.$refs.list) {
                return
            }
            this.inst = new BScroll(this.$refs.list, {
                scrollX: this.scrollX,
                scrollY: this.scrollY,
                probeType: 3
            })
        },
        destroy() {
            if (this.inst) {
                this.inst.destroy()
                this.inst = null
            }
        },
        refresh() {
            this.inst && this.inst.refresh()
        },
        scrollToElement(el, time, offsetX, offsetY) {
            this.inst && this.inst.scrollToElement(el, time, offsetX, offsetY)
        }
    }
}
</script>

<style lang="scss" scoped>
    .wrap {
        height: 200px;
        overflow: hidden;
        &-horizontal {
            height: auto;
            white-space: nowrap;   
            .content{
                display: inline-block;
            }     
        }
    }
</style>